<template>
  <div>
    <!-- height="400px"
    max-height="400px"-->
    <el-table
      v-loading="listLoading"
      :data="tableData"
      :row-style="setRowStyle"
      :cell-style="setColumnStyle"
      :highlight-current-row="true"
      size="medium"
      row-class-name="row"
      cell-class-name="column"
      element-loading-text="Loading"
    >
      <slot name="first" />
      <slot name="second" />
      <slot name="third"/>
      <el-table-column
        v-for="(item, index) in tableLabel"
        :key="index"
        :prop="item.prop"
        :min-width="item.width"
        :label="item.label"
        :align="item.position"
      >
        <template slot-scope="scope">
          <el-button
            v-if="item.isOpera"
            type="text"
            size="small"
            @click="handleGoods(scope.row, $event)"
          >{{ scope.row[item.prop] }}</el-button>
          <div v-else>{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>
      <slot name="isPro"/>
      <slot name="button"/>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    listLoading: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableLabel: {
      type: Array,
      default: () => {
        return []
      }
    },
    setRowStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    setColumnStyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    // emitFn() {
    //   this.$emit('change')
    // },
    // handleGoods(row, e) {
    //   this.$emit('handleGoods', row, e)
    // }
  }
}
</script>
